<template>
  <custom-dialog :title="computedTitle" :width="width" v-model="isVisible" :disabled="disabled" :show-close="disabled"
    :center="center" @close="handleClose">
    <component ref="dynamicForm" :is="componentName" :disabled="disabled" :other="other" :defaultSelectKeys="selectKeys"
      @init="bindFormInit" @save="bindSave" @change="bindChange">
    </component>
    <template #footer>
      <div class="bottom-btns" style="flex: 1">
        <el-button plain round :loading="state.isSave" @click="handleClose">{{
          cancelButtonText
        }}</el-button>
        <el-button round v-for="(b, i) in buttonList" :loading="state.isSave" :key="'btn' + i"
          :type="b.type || 'primary'" :disabled="b.disabled" @click="handleCommandCustom(b.command)">{{ b.label
          }}</el-button>
      </div>
    </template>
  </custom-dialog>
</template>
<script setup name="dataFormDialog">
import { nextTick } from 'vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  cancelButtonText: {
    type: String,
    default: '返回'
  },
  disabled: {
    type: Boolean,
    default: false
  },
  width: {
    type: String,
    default: '500px'
  },
  center: {
    type: Boolean,
    default: false
  },
  other: {
    type: Object,
    default: () => ({})
  },
  selectKeys: {
    type: Array,
    default: () => []
  },
  componentObj: {
    type: Object,
    default: () => ({
      name: 'NoneComponent',
      data() {
        return {
          buttonList: [],
          formTitle: '测试示例'
        }
      },
      mounted() {
      },
      render(h) {
        return h('h1', null, ['这里什么都没有'])
      }
    })
  },
  customTitle: {
    type: String,
    default: ''
  }
})
const emit = defineEmits(['update:modelValue', 'change'])
const state = reactive({
  rowInfo: null,
  isSave: false,
  command: ''
})
const dynamicForm = ref()
const isVisible = computed({
  get: () => props.modelValue,
  set: (v) => {
    emit('update:modelValue', v)
  }
})
const componentName = computed(() => props.componentObj)
const computedTitle = computed(() => props.customTitle || dynamicForm?.value?.formTitle || '')
const buttonList = computed(() => dynamicForm?.value?.buttonList || [])
const watchModelValue = watch(
  () => props.modelValue,
  (v) => {
    v && nextTick(() => {
      let ts = setTimeout(() => {
        if (showTips()) {
          clearTimeout(ts)
          ts = null
        }
      }, 300)
    })
  }
)
function showTips() {
  if (!componentName) {
    this.$message.error(`请先配置${state.title}填写表单!`)
    return false
  }
  return true
}

function handleClose() {
  isVisible.value = false
  dynamicForm?.value?.handleFormReset()
  nextTick(() => {
    state.rowInfo = null
  })
}
function bindChange(e) {
  emit('change', e)
  e && handleClose()
}
function bindFormInit() {
  nextTick(() => {
    state.command && setInfo(state.command === 'bindFormInfo' ? { ...state.rowInfo, [dynamicForm.value.formConfig.mainKey]: state.rowInfo.busId } : state.rowInfo, state.command)
  })
}
function bindSave(f) {
  state.isSave = f
}
function setInfo(e, fun) {
  dynamicForm.value[fun](e)
  state.command = ''
}
function handleCommandCustom(command, e) {
  setInfo(e || '', command)
}
function bindFormInfo(e) {
  state.rowInfo = e
  if (dynamicForm?.value?.bindFormInfo) {
    setInfo(e, 'bindFormInfo')
  } else {
    state.command = 'bindFormInfo'
  }
}
function setDefault(e) {
  state.rowInfo = e
  if (dynamicForm?.value?.setDefault) {
    setInfo(e, 'setDefault')
  } else {
    state.command = 'setDefault'
  }
}
function resetFields() {
  if (dynamicForm?.value?.resetFields) {
    setInfo('', 'resetFields')
  } else {
    state.command = 'resetFields'
  }
}
defineExpose({
  bindFormInfo,
  setDefault,
  resetFields
})
</script>
